import React, { createRef, useEffect, useRef, useState } from "react";
import MallNavBar from './MallNavBar';
import { Container ,Tabs,Tab} from "react-bootstrap";
import {Fab,Action} from 'react-tiny-fab';
import 'react-tiny-fab/dist/styles.css'
import Settings from './setting'
import ProductList from "./product";
import ProductDetail from "./product/detail";
import Cart from "./cart";
import ProductPannel from "./layout/ProductPannel";
import { ProductionItemModel } from "./layout/ProductItem";
import ProductMap from "./layout/ProductMap";
import { CardList, Chat } from "react-bootstrap-icons";
import { useNavigate } from "react-router-dom";
import CartItem from "./model/CartItem";
import SideCartMenu, { SideCartMenuActions } from "./layout/SideCartMenu";
// import 

interface ProductCatagory{
    eventKey:string;
    title:string;
    list:Array<ProductionItemModel>;
}

interface MallProps{
    catagories?:Array<ProductCatagory>
    cartItems?:Array<CartItem>
}

interface MallState{

}

const Mall:React.FC<MallProps>  = (props:MallProps)=> {

    const [catagories,setCatagories] = useState<Array<ProductCatagory>>(props.catagories||[]);
    const navigate = useNavigate();
    const ref = useRef<any>(null);

    useEffect(()=>{
        console.debug("mall")
    },[])

    const onSelect = (eventKey:string|null,event:React.SyntheticEvent<unknown>)=>{

    }

    const pressCart = ()=> {
        if(ref.current){
            ref.current.showCartList();
        }
    }  

    return (<Container fluid className="d-flex flex-column m-0 p-0">
            <MallNavBar onPressCart={pressCart}/>
            <SideCartMenu ref={ref} cartItems={props.cartItems}/>
            <ProductMap/>
            <Tabs defaultActiveKey={"all"} onSelect={onSelect}>
                {catagories.map((catagory,index)=>{
                    return (<Tab key={`catagory-${index}`} eventKey={catagory.eventKey} title={catagory.title}>
                    <ProductPannel showTitle productList={catagory.list} 
                        onClick={()=>{
                            navigate("/mall/product/detail")
                        }}
                    />
                </Tab>)
                })}
            </Tabs>
            <Fab mainButtonStyles={{backgroundColor:'orange',width:50,height:50}}
                 style={{ bottom:0, right:0}}
                 icon={"+"}
                 event={"hover"}
                 key={"1"}
                 alwaysShowTitle={true}
            >
                <Action 
                    style={{backgroundColor:'orangered'}}
                    text="Contact us"
                    onClick={()=>{
                        navigate("/mall/chat");
                    }}
                >
                    <Chat />
                </Action>
                <Action 
                    style={{backgroundColor:'#e844ad'}}
                    text="View More"
                    onClick={()=>{
                        navigate("/mall/product/list")
                    }}
                >
                    <CardList/>
                </Action>
            </Fab>
        </Container>);
}

Mall.defaultProps = {
    catagories:[
        {
            eventKey:"all",
            title:"所有",
            list:[
                {
                    productName:"羊羔绒床垫软垫床护垫垫被加绒单人加厚保暖防滑冬季单人学生宿舍",
                    productSpecs:["新款"],
                    productImg:"//gw.alicdn.com/bao/uploaded/i1/2206509550419/O1CN01Ewhgib1ExwpNszo58_!!0-item_pic.jpg_300x300q90.jpg",
                    price:20.5,
                    discount:0.8,
                    flags:["送运费险","收藏上千"]
                },
                {
                    productName:"奥克斯全钢折叠水壶旅行出差便携式烧水壶不锈钢电热水杯迷你家用",
                    productSpecs:["新款"],
                    productImg:"//gw.alicdn.com/bao/uploaded/i2/2928628469/O1CN01yaFWWA2CQr8vL8T1M_!!0-item_pic.jpg_300x300q90.jpg",
                    price:179,
                    discount:-1,
                    flags:["送运费险","收藏上千"]
                }
            ]
        },
        {
            eventKey:"electronic",
            title:"电子产品",
            list:[
                {
                    productName:"羊羔绒床垫软垫床护垫垫被加绒单人加厚保暖防滑冬季单人学生宿舍",
                    productSpecs:["新款"],
                    productImg:"//gw.alicdn.com/bao/uploaded/i1/2206509550419/O1CN01Ewhgib1ExwpNszo58_!!0-item_pic.jpg_300x300q90.jpg",
                    price:20.5,
                    discount:0.8,
                    flags:["送运费险","收藏上千"]
                },
                {
                    productName:"奥克斯全钢折叠水壶旅行出差便携式烧水壶不锈钢电热水杯迷你家用",
                    productSpecs:["新款"],
                    productImg:"//gw.alicdn.com/bao/uploaded/i2/2928628469/O1CN01yaFWWA2CQr8vL8T1M_!!0-item_pic.jpg_300x300q90.jpg",
                    price:179,
                    discount:-1,
                    flags:["送运费险","收藏上千"]
                }
            ]
        },
        {
            eventKey:"fashion",
            title:"时尚",
            list:[
                {
                    productName:"羊羔绒床垫软垫床护垫垫被加绒单人加厚保暖防滑冬季单人学生宿舍",
                    productSpecs:["新款"],
                    productImg:"//gw.alicdn.com/bao/uploaded/i1/2206509550419/O1CN01Ewhgib1ExwpNszo58_!!0-item_pic.jpg_300x300q90.jpg",
                    price:20.5,
                    discount:0.8,
                    flags:["送运费险","收藏上千"]
                },
                {
                    productName:"奥克斯全钢折叠水壶旅行出差便携式烧水壶不锈钢电热水杯迷你家用",
                    productSpecs:["新款"],
                    productImg:"//gw.alicdn.com/bao/uploaded/i2/2928628469/O1CN01yaFWWA2CQr8vL8T1M_!!0-item_pic.jpg_300x300q90.jpg",
                    price:179,
                    discount:-1,
                    flags:["送运费险","收藏上千"]
                }
            ]
        },
        {
            eventKey:"sport",
            title:"体育运动",
            list:[
                {
                    productName:"羊羔绒床垫软垫床护垫垫被加绒单人加厚保暖防滑冬季单人学生宿舍",
                    productSpecs:["新款"],
                    productImg:"//gw.alicdn.com/bao/uploaded/i1/2206509550419/O1CN01Ewhgib1ExwpNszo58_!!0-item_pic.jpg_300x300q90.jpg",
                    price:20.5,
                    discount:0.8,
                    flags:["送运费险","收藏上千"]
                },
                {
                    productName:"奥克斯全钢折叠水壶旅行出差便携式烧水壶不锈钢电热水杯迷你家用",
                    productSpecs:["新款"],
                    productImg:"//gw.alicdn.com/bao/uploaded/i2/2928628469/O1CN01yaFWWA2CQr8vL8T1M_!!0-item_pic.jpg_300x300q90.jpg",
                    price:179,
                    discount:-1,
                    flags:["送运费险","收藏上千"]
                }
            ]
        },
        {
            eventKey:"collection",
            title:"收藏",
            list:[
                {
                    productName:"羊羔绒床垫软垫床护垫垫被加绒单人加厚保暖防滑冬季单人学生宿舍",
                    productSpecs:["新款"],
                    productImg:"//gw.alicdn.com/bao/uploaded/i1/2206509550419/O1CN01Ewhgib1ExwpNszo58_!!0-item_pic.jpg_300x300q90.jpg",
                    price:20.5,
                    discount:0.8,
                    flags:["送运费险","收藏上千"]
                },
                {
                    productName:"奥克斯全钢折叠水壶旅行出差便携式烧水壶不锈钢电热水杯迷你家用",
                    productSpecs:["新款"],
                    productImg:"//gw.alicdn.com/bao/uploaded/i2/2928628469/O1CN01yaFWWA2CQr8vL8T1M_!!0-item_pic.jpg_300x300q90.jpg",
                    price:179,
                    discount:-1,
                    flags:["送运费险","收藏上千"]
                }
            ]
        }
    ],
    cartItems:[
        {
            product:{
                productName:"羊羔绒床垫软垫床护垫垫被加绒单人加厚保暖防滑冬季单人学生宿舍",
                productImg:"//gw.alicdn.com/bao/uploaded/i1/2206509550419/O1CN01Ewhgib1ExwpNszo58_!!0-item_pic.jpg_300x300q90.jpg",
                price:20.5,
                discount:0.8,    
            },
            count:1,
        },
        {
            product:{
                productName:"奥克斯全钢折叠水壶旅行出差便携式烧水壶不锈钢电热水杯迷你家用",
                productImg:"//gw.alicdn.com/bao/uploaded/i2/2928628469/O1CN01yaFWWA2CQr8vL8T1M_!!0-item_pic.jpg_300x300q90.jpg",
                price:179,
                discount:-1,    
            },
            count:2
        }
    ]
}

export default Mall;

export {
    Cart,
    Settings,
    ProductList,
    ProductDetail,
}